<template>
	<el-form ref="ruleFormRef" label-position="top" :model="formInline" :rules="formRules" label-width="auto"
		v-loading="isLoading">
		<el-row :gutter="30">

			<!-- <re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.id' prop='id'>
					<el-input v-model='formInline.id' clearable :placeholder='prompt?.id' />
				</el-form-item>
			</re-col> -->
			<re-col :value='12' :xs='12' :sm='12'>
				<el-form-item :label='titles?.channelsName' prop='channelsName'>
					<el-input :maxlength="30" :show-word-limit="true"
					v-model='formInline.channelsName' clearable :placeholder='prompt?.channelsName' />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='12' :sm='12'>
				<el-form-item :label='titles?.channelsId' prop='channelsId'>
					<el-input :maxlength="20" :show-word-limit="true"
					v-model='formInline.channelsId' clearable :placeholder='prompt?.channelsId' />

				</el-form-item>
			</re-col>
			
			<re-col :value='24' :xs='24' :sm='24'>
				<el-form-item :label='titles?.position' prop='position'>
					<el-radio-group  v-model='formInline.position' @change="changepostion">
						<el-radio v-for="item in POSTIONSTATUS" :key="item.value" :value="item.value">
							{{ isNullOrEmpty( item.label ) }}
						</el-radio>
					</el-radio-group>
				
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='12' :sm='12' v-if="formInline.position == 1">
				<el-form-item :label='titles?.buildingId' prop='buildingId'>
					<!-- <el-input v-model='formInline.buildingId' clearable :placeholder='prompt?.buildingId' /> -->

					<el-select @change="changeBuilding"   v-model.trim='formInline.buildingId'>
						<el-option v-for="item in options" :key="item.buildingId" :label="item.buildingName"
							:value="item.buildingId" />
					</el-select>
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='12' :sm='12' v-if="formInline.position == 1">
				<el-form-item :label='titles?.drawingId' prop='drawingId'>
					<floors v-model.trim='formInline.drawingId' clearable :placeholder='prompt?.drawingId'
						 :buildingId='formInline.buildingId' :style='{ width: "100%" }' @blur="formValidateField(ruleFormRef, 'drawingId')">
					</floors>
					<!-- <el-input v-model='formInline.drawingId' clearable :placeholder='prompt?.drawingId' /> -->
				</el-form-item>
			</re-col>
			<re-col :value='24' :xs='12' :sm='12' v-if="formInline.position == 2">
				<el-form-item :label='titles?.drawingPoints' prop='drawingPoints'>
					<el-button type="primary" @click="openPositionMark">图纸标记</el-button>
					<!-- <el-input v-model='formInline.drawingPoints' clearable :placeholder='prompt?.drawingPoints' /> -->
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='12' :sm='12'>
				<el-form-item :label='titles?.place' prop='place'>
					<div class="flex w-full">
						<el-input :maxlength="30" :show-word-limit="true"
						v-model='formInline.place' clearable :placeholder='prompt?.place' />
						<el-button v-if="formInline.position == 2" type="primary" @click='edit'
							class="ml-[16px]">地图标记</el-button>
						<el-button v-if="formInline.position == 1" type="primary" class="ml-[16px]"
							@click="openPositionMark">图纸标记</el-button>
					</div>
				</el-form-item>

			</re-col>

		</el-row>
	</el-form>
</template>

<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import drawingPoints from "@/components/positionSelect/drawingPoints.vue";
import { addDialog } from "@/components/ReDialog";
import SjMap from "@/components/mapForm/map.vue"
import { deviceDetection, debounce } from "@pureadmin/utils";
import { allPointsVideo } from '@/api/operate/project-management/projectManagement/architectural-settings/index';
import { ref, reactive } from "vue";
import ReCol from "@/components/ReCol";
import type { FormRules } from "element-plus";
import { titles, prompt } from './index';
import { POSTIONSTATUS } from "@/constant/video-managemrnt";
import type { infoType } from '@/api/operate/video-management/index';
import floors from "@/components/select/floors/floors.vue";
import { getInfo as settingInfo } from "@/api/operate/project-management/projectManagement/setting";
import { getInfo as drawingInfo, } from '@/api/operate/project-management/project-management/drawing-management/index';
import { usePoints } from "@/common/points";
import { getbuildSelectList } from '@/api/operate/project-management/projectManagement/architectural-settings/index';
import { usePageVariablesStoreHook, UNIT_TYPE_VIEW_Map } from '@/store/modules/pageVariables'
import { formValidateField } from '@/utils/functions'
const operate = usePageVariablesStoreHook().getOperate()
const drawingPointsRefs = ref()
type FormProps = {
	formInline: infoType,
	isLoading: boolean,
	originMarker: Array|Object,
}
const labelMarkers = ref() //已经标记过的点位
const formState = reactive({
	center: [],
	drawingPoint: {},
	// area:[]
})


const options = ref([])  //楼层select
const props = withDefaults(defineProps<FormProps>(), {
	formInline: () => ({} as infoType),
	isLoading: false,
	originMarker: () => {},




});
const formRules = reactive(<FormRules>{
	channelsName: [{ required: true, message: prompt?.channelsName, trigger: 'blur' },],
	channelsId: [{ required: true, message: prompt?.channelsId, trigger: 'blur' },],
	position: [{ required: true, message: prompt?.position, trigger: 'change' },],
});
const showInfo = ref();
const formRef = ref();
const ruleFormRef = ref();

onMounted(() => {
// 	  setTimeout(() => {
//   images()
//   }, 300);
	getbuildSelectList().then(res => {
		options.value = res.result


	})
})
// const changeSelect = (e) => {
// 	props.formInline.drawingId = null
// }

const changeBuilding = (e)=>{
	
	
	props.formInline.drawingId = ''
}
//打开地图组件
// 编辑
const edit = () => {
	showInfo.value = {}
	openDialog("")
}
const openDialog = (title = "项目编辑") => {
	allPointsVideo({ projectId: operate.checkedProject }).then(res => {
		labelMarkers.value = res.result.map(item => ({ lng: item.markPoint.lng, lat: item.markPoint.lat }));
		console.log("获取已经标记过的点位", labelMarkers.value);
		formState.center = [props.formInline.markPoint.lng, props.formInline.markPoint.lat]
		addDialog({
			title: '地图标记',
			width: "800px",
			draggable: true,
			props: {
				center: formState.center,
				isEdit: true,
				showCreatePoly: false,
				labelMarkers: labelMarkers.value
				// area:formState.area
			},
			fullscreen: deviceDetection(),
			fullscreenIcon: true,
			closeOnClickModal: false,
			contentRenderer: () => h(SjMap, {
				ref: formRef,
				"onUpdate:center": (val) => {
					formState.center = val
				},
				// "onUpdate:area": (val) => {
				//   formState.area = val
				// },
			}),
			/*
				contentRenderer: () => h(mapForm, {
				  ref: formRef,
				}),
			*/
			beforeSure: (done, { options }) => {
				function chores() {
					props.formInline.markPoint.lng = formState.center[0]
					props.formInline.markPoint.lat = formState.center[1]
					// props.formInline.lng = formState.center[0]  //用于再次点开地图的回显
					// props.formInline.lat = formState.center[1]   //用于再次点开地图的回显
					// props.formInline.markPoint. = formState.area
					// console.log("提交的数据类型", props.formInline.markPoint);

					done(); // 关闭弹框
					// getinfo(); // 刷新表格数据
				}

				chores()
			}
		})
	})
}
//获取图纸
const images = () => {
	// props.formInline.drawingId && props.formInline.position == 1
  if (props.formInline.position == 1) {
	// console.log("获取室内");
    getImg()
  } else {
	// console.log("获取室外");
	
    getSettinginfo()
  }
}
const bgImg = ref()
const getImg = () => {  //获取室内图纸
 
  //如果是室内
  if(props.formInline.buildingId !== ''){
	drawingInfo({ id: props.formInline.drawingId }).then(res => {
    if (res.code == 200) {
      bgImg.value = res.result.img
        //  console.log("室内", bgImg.value);

    }
  })
  }

}
const getSettinginfo = () => {   //获取室外图纸
  settingInfo().then(res => {
    if (res.code == 200) {
		// console.log('平面',res)
      bgImg.value = res.result.projectPlan
    }
  })
}
//图纸标记
watch(() => props.formInline.position, (val) => {  //监听当前选择的是室内还是室外
  if (val) {
    images()
	props.formInline.drawingId = ''
	props.formInline.buildingId=''
	console.log('平面')
  }
})
watch(() => props.formInline.drawingId, (val) => {  //监听楼层的id变化
  if (val) {
    images()
	console.log('平面2')
  }
})
const openPositionMark = () => {
	
	let changeMarker = []
	const dp = props.formInline.drawingPoint
	 props.formInline.childrenbuilding = props.formInline.drawingId + "-1" + props.formInline.buildingId

	
	if (Object.keys(dp).length > 2 && dp.lat !== '' && dp.lng !== '') {
		changeMarker = [dp]
	}
	
	addDialog({
		title: `图纸标点`,
		width: "1100px",
		draggable: true,
		props: {
			formInline: props.formInline,
			isShowPopup: false,
			iconUrl:'monitor',
			changeMarker: changeMarker, //添加，修改的标点
			markerArr: [], //已经添加过的标点
			bgImg: bgImg.value,
			
		},
		fullscreen: deviceDetection(),
		fullscreenIcon: true,
		closeOnClickModal: false,
		contentRenderer: () => h(drawingPoints, {
			ref: drawingPointsRefs,
			"onUpdate:changeMarker": (val) => {
				if(val.length>0){
            formState.drawingPoint = val[0];
          }
				// formState.drawingPoint = val[0]
			}
		}),
		open: ({ options, index }) => {
			usePoints("video").getMarkerPoints(true, props.originMarker, { projectId: operate.checkedProject, drawingId: props.formInline.position == 1 ? props.formInline.drawingId : '', buildingId: props.formInline.position == 1 ? props.formInline.buildingId : '' }).then(res => {
        drawingPointsRefs.value.setFixedMarkers(res)
      })
		},
		beforeSure(done, { options, index }) {
			props.formInline.drawingPoint = formState.drawingPoint
			 console.log('点击确认', props.formInline.drawingPoint, formState.drawingPoint);

			done();// 关闭弹框

		},
	});
}
function getRef() {
	return ruleFormRef.value;
}
const changepostion = (e) => {
	console.log('e', e);
	props.formInline.position =e

}
defineExpose({ getRef });

</script>
